﻿<div class="options-editor">
    <div ng-if="activeQuestion.useListAsOptionsEditor">
        <div class="table-holder">
            <div class="table-row question-options-editor" style="height: 0">
                <div class="column-2">
                    <label class="wb-label" ng-i18next="OptionsUploadValue"></label>
                    <help key="HelpOptionValue" />
                </div>
                <div class="column-3">
                    <label class="wb-label" ng-i18next="OptionsUploadTitle"></label>
                    <help key="HelpOptionTitle" />
                </div>
                <div class="column-35">
                    <label class="wb-label" ng-i18next="StaticTextAttachmentName"></label>
                    <help key="attachmentName" />
                </div>
            </div>
            <div class="table-row question-options-editor" ng-repeat="option in activeQuestion.options">
                <div class="column-2">
                    <ng-form name="options_value_form">
                        <input type="number" min="-2147483648" max="2147483647"
                               name="option_value"
                               ng-model="option.value"
                               ng-pattern="/^([-+]?\d+)$/"
                               ng-class="{'has-error': !options_value_form.option_value.$valid}"
                               ng-keypress="onKeyPressInOptions($event)"
                               class="form-control question-option-value-editor border-right"/>
                    </ng-form>
                </div>
                <div class="column-3">
                    <input ng-attr-id="{{'option-title-' + $index}}" type="text" ng-model="option.title" ng-keypress="onKeyPressInOptions($event)" class="form-control border-right"/>
                </div>
                <div class="column-35">
                    <input ng-attr-id="{{'option-attachmentName-' + $index}}" type="text" ng-model="option.attachmentName" ng-keypress="onKeyPressInOptions($event)" class="form-control border-right"/>
                </div>
                <div class="column-4">
                    <a href="javascript:void(0);" ng:click="removeOption($index)" class="btn" tabindex="-1"></a>
                </div>
            </div>
        </div>
            <p>
                <button class="btn btn-link" ng-if="activeQuestion.type == 'Numeric'" ng-hide="activeQuestion.optionsCount >= MAX_OPTIONS_COUNT" ng-click="addOption()" ng-i18next="QuestionAddSpecialValues"></button>
                <button class="btn btn-link" ng-if="activeQuestion.type != 'Numeric'" ng-hide="activeQuestion.optionsCount >= MAX_OPTIONS_COUNT" ng-click="addOption()" ng-i18next="QuestionAddOption"></button>
                <button class="btn btn-link" ng-click="showAddClassificationModal()" ng-i18next="QuestionAddClassification"></button>

                <button class="btn btn-link pull-right" ng-click="showOptionsInTextarea()" ng-i18next="StringsView"></button>
            </p>
        </div>
    <div ng-if="!activeQuestion.useListAsOptionsEditor">
        <div class="form-group" ng-class="{'has-error': !questionForm.stringifiedOptions.$valid}">
            <textarea name="stringifiedOptions"
                      class="form-control mono"
                      ng-model="activeQuestion.stringifiedOptions"
                      match-options-pattern
                      max-options-count
                      msd-elastic></textarea>
            <p class="help-block">
                <input class="btn btn-link" type="button" ng-i18next="[value]TableView" value="Show list" ng-click="showOptionsInList()" ng-disabled="!questionForm.stringifiedOptions.$valid" />
            </p>
            <p class="help-block ng-cloak" ng-show="questionForm.stringifiedOptions.$error.matchOptionsPattern" ng-i18next="OptionsListError">
            </p>
            <p class="help-block ng-cloak" ng-show="questionForm.stringifiedOptions.$error.maxOptionsCount"
               ng-i18next="({count: 200})EnteredMoreThanAllowed">
            </p>
        </div>
    </div>
</div>
